<template>
	<view class="content">
		<pyh-nv :config="config"></pyh-nv>
		<view class="tabsBox">
			<v-tabs v-model="current" :scroll="true" :tabs="tabs" fontSize="25rpx" @change="changeTab" color="#000000"
				activeColor="#6D9CB3" height="50rpx" lineHeight="5rpx" lineColor="#6D9CB3" lineScale="0.4"
				bgColor="transparent" paddingItem="20rpx">
			</v-tabs>
		</view>
		<view class="dataBox">
			<view class="dataItem" v-for="(item,index) in news" :key="index" @click="toInfo(item.id,item.uri)">
				<view class="titleBox">
					<!-- <image :src="item.avatar" class="avatar"></image> -->
					<text class="name">{{item.name}}</text>
					<text class="time">{{item.create_time}}</text>
				</view>
				<text class="title">{{item.title}}</text>
				<text class="desc">{{item.intro}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseurl: this.$baseurl,
				config: {
					title: '项目动态',
					bgColor: 'transparent',
					color: '#000000',
				},
				tabs: ['全部'],
				content: '',
				news:'',
				page:1
			}
		},
		onLoad(options) {
			// 项目新闻
			this.$request.get(`article/lists?project_id=${options.id}&page_no=${this.page}&page_size=10&cid=0`).then(res => {
				console.log(res.data.data);
				this.news = res.data.data.list;
			})
		},
		onReachBottom() {
			console.log("加载更多");
			this.page++;
			this.$request.get(`article/lists?project_id=${options.id}&page_no=${this.page}&page_size=10&cid=0`).then(res => {
				console.log(res.data.data);
				this.news.push(...res.data.data.list);
			})
		},
		methods: {
			toInfo(id, url) {
				if (url) { //存在链接跳公众号
					this.$navto.navto('/pages/webview/webview', {
						url: url,
						from: 1
					})
				} else { //跳
					this.$navto.navto('/packageB/news_info/news_info', {
						id: id
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.dataBox {
		position: fixed;
		width: 686rpx;
		margin-left: 32rpx;
		margin-top: 30rpx;
		display: flex;
		flex-direction: column;
		overflow-y: scroll;
		height: 80vh;

		.dataItem {
			width: 100%;
			background-color: #fff;
			border-radius: 15rpx;
			position: relative;
			padding-bottom: 24rpx;
			display: flex;
			flex-direction: column;
			margin-bottom: 20rpx;

			.desc {
				width: 642rpx;
				font-size: 28rpx;
				color: #333333;
				opacity: 0.4;
				margin-top: 15rpx;
				margin-left: 24rpx;
			}

			.title {
				width: 642rpx;
				margin-left: 24rpx;
				margin-top: 15rpx;
				font-weight: 500;
				font-size: 32rpx;
			}

			.titleBox {
				width: 686rpx;
				height: 80rpx;
				background: url('https://miantou.guguan.net/img/project/newsTitleBg.png');
				background-size: 100% 100%;
				display: flex;
				align-items: center;
				position: relative;

				.avatar {
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
					margin-left: 24rpx;
				}

				.name {
					color: #333333;
					font-size: 24rpx;
					margin-left: 24rpx;
					font-weight: 500;
				}

				.time {
					position: absolute;
					color: #333333;
					font-size: 24rpx;
					opacity: 0.4;
					right: 24rpx;
					font-weight: 500;
				}

			}
		}
	}

	.tabsBox {
		width: 100%;
		margin-left: 35rpx;
		margin-top: 20rpx;
		overflow-x: scroll;
	}

	.content {
		position: fixed;
		width: 100%;
		height: 100vh;
		overflow-y: scroll;
		background: url('https://miantou.guguan.net/img/project/newsBg.jpg');
		background-size: 100% 100%;
	}
</style>